<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>可视化例子</title>
</head>
<style>
    body{
        background: rgb(50, 54, 57);
    }
</style>

<body>
    <canvas id="canvas" width="1000" height="300"></canvas>
    <br><button name="dial" id="dial" onclick="_play()">start</button>　　<button name="dial" id="dial" onclick="_close()">stop</button>
    <select name="cars" id="select">
        <option value="getByteTimeDomainData">波型</option>
        <option value="getByteFrequencyData">频率</option>
    </select>
    <div>
        <span>分贝范围的最小值：</span><input id="minDecibels" type="range" max="0" min="-100" value="-100" step="0.01" />
        <p id="minDecibels_value">-100</p>
    </div>
    <div>
        <span>分贝范围的最大值：</span><input id="maxDecibels" type="range" max="0" min="-100" value="0" step="0.01" />
        <p id="maxDecibels_value">0</p>
    </div>
    <div>
        <span>快速傅里叶变换：</span><input id="fftSize" type="range" min="5" max="15" value="11" step="1" />
        <p id="fftSize_value">1024</p>
    </div>
    <div>
        <span>分析帧的平均常数：</span><input id="smoothingTimeConstant" type="range" max="1" min="0" value="0.8" step="0.01" />
        <p id="smoothingTimeConstant_value">0.8</p>
    </div>
    <script src="index.js"></script>
</body>

</html>